<script>
import { main } from '@/util/mixins'
import * as service from 'services/x-start/mgr/role'
import { flatten } from 'array-flatten'

export default {
  mixins: [main],
  data() {
    return {
      service,
      roleList: [],
    }
  },
  created() {},
  methods: {
    sortChange(val) {
      this.getList({ val })
    },
    modify() {},
    detail(id, item) {
      this.service.detail({ id }).then(res => {
        this.detailInfo.id = id
        this.detailInfo.name = item ? item.name : ''
        this.roleList = this.CleaningData(res.data)
        this.isShowUeditor = true
        this.$refs.child.dialogVisible = true
      })
    },
    CleaningData(object) {
      let array = []
      for (const key in object) {
        if (object.hasOwnProperty(key)) {
          const element = object[key]
          let obj = {}
          obj.name = key
          obj.checkedRoles = []
          element.forEach(i => {
            if (i.checked) {
              obj.checkedRoles.push(i.interfaceId)
            }
          })
          obj.isIndeterminate = false
          obj.list = element
          obj.checkAll = obj.checkedRoles.length == element.length
          array.push(obj)
        }
      }
      return array
    },
    handleCheckAllChange(item, e) {
      if (e.target.tagName === 'INPUT') return
      item.checkedRoles = !item.checkAll
        ? item.list.map(i => i.interfaceId)
        : []
      item.isIndeterminate = false
      item.checkAll = !item.checkAll
    },
    handleCheckedCitiesChange(items, item, e) {
      if (e.target.tagName === 'INPUT') return
      let checkedCount = item.checkedRoles
      let index = checkedCount.findIndex(item => item == items.interfaceId)
      if (index > -1) {
        checkedCount.splice(index, 1)
      } else {
        checkedCount.push(items.interfaceId)
      }
      item.checkAll = item.checkedRoles.length === item.list.length
      item.isIndeterminate =
        checkedCount.length > 0 && checkedCount.length < item.list.length
    },
    save() {
      this.service
        .save({
          ...this.detailInfo,
          interfaceIds: flatten(this.roleList.map(i => i.checkedRoles)),
        })
        .then(
          res => {
            this.$message.success('保存成功')
            this.getList(this.query)
            this.dialogVisible = false
            if (this.$refs.child) {
              this.$refs.child.dialogVisible = false
            }
          },
          err => {
            this.$message.error(err.payload.message)
          }
        )
    },
  },
}
</script>

<template lang="pug">
Template(@sizeChange="handleSizeChange" @currentChange="handleCurrentChange" :total="total" ref="child" width='50%')
  span(slot="title") 角色管理
  .btns(slot="rightBtn")
    el-button(size="mini" type="primary" plain @click="detail()") 新建角色
  .list(slot="list")
    el-table(
      ref="table"
      stripe
      :data="tableData"
      tooltip-effect="dark"
      fit
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
    )
      el-table-column(prop="id" label="角色id")
      el-table-column(prop="name" label="角色名")
      el-table-column(label="创建时间")
        template(slot-scope="{row}")
          span {{row.createTime|formatTime}}
      el-table-column(label="操作" fixed="right")
        template(slot-scope="{row}")
          Icon(title="修改" type="icon-detail" @click="detail(row.id,row)")
          Icon(title="删除" type="icon-delete" @click="del(row.id)")
  .detail(slot="detail")
    .group
      .label.must 角色名：
      .right(style="width:40%")
        input.form-control(size="small" v-va="{ type:'required' }" vali="" v-model="detailInfo.name")
    .group 
      .label 权限：
      .right.authority
        .item(v-for='item in roleList')
          el-checkbox(:indeterminate="item.isIndeterminate" :value="item.checkAll" @click.native="handleCheckAllChange(item,$event)") {{item.name}}
          //- el-checkbox-group(:value="item.checkedRoles")
          //-   el-checkbox(v-for="items in item.list" :label="items.interfaceId" :key="items.interfaceId"  @click.native="handleCheckedCitiesChange(items,item,$event)") {{items.interfaceName}}
</template>

<style lang="stylus" scoped>
.authority
  background #efefef
  .item
    margin-bottom 10px
    padding 0 20px
    display inline-block
.detail
  >>> .el-checkbox__label
    line-height inherit
.data
  display inline-block
  line-height 40px
  li
    display inline-block
    cursor pointer
    margin-right 20px
    &.active
      color #FF6D60
</style>